<!DOCTYPE html>
<html>
    <head>
        <title>mmRouter组件</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="../style/avalon.doc.css">
        <script src="../avalon.js"></script>
        <script src="../highlight/shCore.js"></script>
        <script>
            require(["mmRouter/mmRouter"], function() {
                var model = avalon.define('test', function(vm) {
                    vm.currPath = ""
                    vm.params = {}
                    vm.query = {}
                    vm.args = "[]"
                })
                function callback() {
                    model.currPath = this.path
                    var params = this.params
                    if ("time" in params) {
                        params.time = avalon.filters.date(params.time, "yyyy年M月dd日")
                    }
                    model.params = params
                    model.query = this.query
                    model.args = "[" + [].slice.call(arguments, 0) + "]"

                }
                avalon.router.get("/aaa/", callback)
                avalon.router.get("/bbb", callback)
                avalon.router.get("/ccc/:ccc", callback)
                avalon.router.get("/ddd/{time:date}/", callback)
                avalon.router.get("/eee/{count:\\d{4}}/", callback)
                avalon.router.get("/fff", callback)
                avalon.history.start({
                    basepath: "/avalon"
                })
                avalon.scan()
            })
        </script>
    </head>
    <body ms-controller="test">
        <h1>mmRouter综合示例三: scrolltoview</h1>
        <div ms-controller="test">
            <table width="100%" height="300">
                <tr>
                    <td width="250">
                        <ul>
                            <li><a href="#!/aaa">aaa</a></li>
                            <li><a href="#!/bbb?uu=3445345&were=4324">bbb</a></li>
                            <li><a href="#!/ccc/etretr">ccc</a></li>
                            <li><a href="#!/ddd/2014-09-19">ddd</a></li>
                            <li><a href="#!/eee/2222">eee</a></li>
                            <li><a href="#!/fff?a=1&nn=4&dfg=676">fff</a></li>
                        </ul>
                    </td>
                    <td>
                        <div style="color:red">this.path: {{currPath}}</div>
                        <div style="color:blue">arguments: {{args}}</div>
                        <fieldset>
                            <legend>this.params</legend>
                            <ol>
                                <li ms-repeat="params"> {{$key}}: {{$val}}</li>
                            </ol>
                        </fieldset>
                        <fieldset>
                            <legend>this.query</legend>
                            <ol>
                                <li ms-repeat="query"> {{$key}}: {{$val}}</li>
                            </ol>
                        </fieldset>
                    </td>
                </tr>
            </table>
            <div style="height: 400px;width:1px;">

            </div>
            <p id="fff">会定位到这里</p>
        </div>
        <pre ms-skip class="brush:html;gutter:false;toolbar:false">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;mmRouter组件&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;
        &lt;script src=&quot;../avalon.js&quot;&gt;&lt;/script&gt;
        
        &lt;script&gt;
            require([&quot;mmRouter/mmRouter&quot;], function() {
                var model = avalon.define('test', function(vm) {
                    vm.currPath = &quot;&quot;
                    vm.params = {}
                    vm.query = {}
                    vm.args = &quot;[]&quot;
                })
                function callback() {
                    model.currPath = this.path
                    var params = this.params
                    if (&quot;time&quot; in params) {
                        params.time = avalon.filters.date(params.time, &quot;yyyy年M月dd日&quot;)
                    }
                    model.params = params
                    model.query = this.query
                    model.args = &quot;[&quot; + [].slice.call(arguments, 0) + &quot;]&quot;

                }
                avalon.router.get(&quot;/aaa/&quot;, callback)
                avalon.router.get(&quot;/bbb&quot;, callback)
                avalon.router.get(&quot;/ccc/:ccc&quot;, callback)
                avalon.router.get(&quot;/ddd/{time:date}/&quot;, callback)
                avalon.router.get(&quot;/eee/{count:\\d{4}}/&quot;, callback)
                avalon.router.get(&quot;/fff&quot;, callback)
                avalon.history.start({
                    basepath: &quot;/avalon&quot;
                })
                avalon.scan()
            })
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body ms-controller=&quot;test&quot;&gt;
        &lt;h1&gt;mmRouter综合示例三: scrolltoview&lt;/h1&gt;
        &lt;div ms-controller=&quot;test&quot;&gt;
            &lt;table width=&quot;100%&quot; height=&quot;300&quot;&gt;
                &lt;tr&gt;
                    &lt;td width=&quot;250&quot;&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/aaa&quot;&gt;aaa&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/bbb?uu=3445345&amp;were=4324&quot;&gt;bbb&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/ccc/etretr&quot;&gt;ccc&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/ddd/2014-09-19&quot;&gt;ddd&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/eee/2222&quot;&gt;eee&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=&quot;#!/fff?a=1&amp;nn=4&amp;dfg=676&quot;&gt;fff&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                    &lt;/td&gt;
                    &lt;td&gt;
                        &lt;div style=&quot;color:red&quot;&gt;this.path: {{currPath}}&lt;/div&gt;
                        &lt;div style=&quot;color:blue&quot;&gt;arguments: {{args}}&lt;/div&gt;
                        &lt;fieldset&gt;
                            &lt;legend&gt;this.params&lt;/legend&gt;
                            &lt;ol&gt;
                                &lt;li ms-repeat=&quot;params&quot;&gt; {{$key}}: {{$val}}&lt;/li&gt;
                            &lt;/ol&gt;
                        &lt;/fieldset&gt;
                        &lt;fieldset&gt;
                            &lt;legend&gt;this.query&lt;/legend&gt;
                            &lt;ol&gt;
                                &lt;li ms-repeat=&quot;query&quot;&gt; {{$key}}: {{$val}}&lt;/li&gt;
                            &lt;/ol&gt;
                        &lt;/fieldset&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
            &lt;div style=&quot;height: 400px;width:1px;&quot;&gt;

            &lt;/div&gt;
            &lt;p id=&quot;fff&quot;&gt;会定位到这里&lt;/p&gt;
        &lt;/div&gt;
        
    &lt;/body&gt;
&lt;/html&gt;
</pre>
    </body>
</html>
